<style scoped>
    @import "../styles/detail.css";
</style>
<template>

    <div class="page-wrap page-detail" id="page-previous-record">
        <div class="g-body">
            <div class="m-winRecord">
                <header-component :page-name="pageName"></header-component>
                <div class="g-wrap">

                    <div class="m-winRecord-wrap">
                        <div class="w-loading" style="display: none;">
                            <img style="display:inline;vertical-align:middle" width="20" height="20" src="http://mimg.127.net/p/yymobile/lib/img/common/loading.gif"> 正在努力加载中……
                        </div>
                        <ul class="m-winRecord-list" id="previousRecordList">
                            <a href="javascript:;" data-href="?c=detail&id={{sid}}" v-link="{path:'/detail',query:{id:i.sid}}" style="color:#525252" v-for="(k,i) in data">
                                <li class="w-record m-winRecord-revealed">
                                    <div class="w-record-title"><object><a href="javascript:;">期号：{{i.periodsNo}} ( 揭晓时间：{{i.announcedTime}} )</a></object></div>
                                    <div class="w-record-cnt f-clear">
                                        <div class="w-record-avatar">
                                            <object><a href="javascript:;" data-href="?c=profile&id={{userid_bak}}" v-link="{name:'profile',query:{id:i.userid_bak}}"><img width="90" height="90" :src="i.userimg"></a></object>
                                        </div>
                                        <div class="w-record-detail">
                                            <p class="f-txtabb">获奖者：<object><a href="javascript:;" data-href="?c=profile&amp;id={{userid_bak}}" v-link="{name:'profile',query:{id:i.userid_bak}}">{{i.username}}</a></object></p>
                                            <p class="f-txtabb"><span class="txt-green">({{i.city}} IP：{{i.userip}} )</span></p>
                                            <p>用户ID：{{i.userid}} (唯一不变标识)</p>
                                            <p>幸运号码：<span class="txt-red">{{i.usercode}}</span></p>
                                            <p>本期参与：<span class="txt-red">{{i.personTimes}}</span>人次</p>
                                        </div>
                                    </div>
                                </li>
                            </a>
                        </ul>
                        <div class="w-more" id="recordListMore" v-el:get-record-list-more>


                            <template v-if="data.length<10&&!hasMore">
                                没有更多了
                            </template>
                            <template v-if="hasMore">
                                <b class="ico ico-loading"></b> 努力加载中
                            </template>
                            <template v-if="data.length==0">
                                暂无记录
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import headerComponent from '../components/header';
    import Goods from '../module/goods'
    module.exports = {
        data() {
            return {
                id : '',
                data: [],
                formData: {},
                parms: [],
                page: 0,
                limit: 10,
                hasMore: true,
                loading: false,
                pageName:'往期揭晓'

            }
        },
        components: {

            headerComponent

        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {

        if (!!this.$route.query.id) {

            this.id = this.$route.query.id

        } else {

            history.go(-1)

        }

        await this.loadMore();

        document.addEventListener('scroll',this.getMore,false)

            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {

        document.removeEventListener('scroll',this.getMore,false)

        },
        methods: {

            async loadMore(){

                if (this.loading) {

                    return;

                }

                this.loading = true;

                let res = await Goods.getPreviousRecord({id:this.id,offset:this.page*this.limit,limit:this.limit});


                if (res && res.item && res.item.length > 0) {

                    this.page++;

                    this.data.push(...res.item);

                } else {

                    this.hasMore = false;

                }

                this.loading = false;

            },

            async getMore(){

                let pos = this.$els.getRecordListMore.getBoundingClientRect();

                if (this.hasMore &&
                        ((pos.top > 0 && window.innerHeight - pos.top > 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {
                    await this.loadMore();
                }

            }

        }
    }
</script>
